<template>
<div>
    <button class="vue-switch" @click="toggle" :class="{'vue-checked':value}">
        <span></span>
    </button>
</div>
</template>

<script lang="ts">
import {
    ref
} from "vue";
export default {
    props: {
        value: Boolean
    },
    setup(props, context) {
        const toggle = () => {
            context.emit('update:value', !props.value);
        };
        return {
            toggle
        };
    },
};
</script>

<style lang="scss" scoped>
$h: 22px;
$h1: $h - 4px;

.vue-switch {
    width: $h * 2;
    height: $h;
    border-radius: $h/2;
    border: none;
    background: gray;
    position: relative;
    outline: none;
}

span {
    width: $h1;
    height: $h1;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    transition: left 250ms;
}

.vue-switch.vue-checked {
    background: blue;
}

.vue-switch.vue-checked>span {
    left: calc(100% - #{$h1} - 2px);
}
</style>
